/*
 * @Author: zhouyanxin123 10857086+zhouyanxin123@user.noreply.gitee.com
 * @Date: 2022-08-12 11:04:35
 * @LastEditors: zhouyanxin123 10857086+zhouyanxin123@user.noreply.gitee.com
 * @LastEditTime: 2022-08-16 17:45:23
 * @FilePath: \ceshi\src\spliebiao.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useState } from "react";
import { UploadOutlined } from "@ant-design/icons";
import {
  Button,
  Cascader,
  Input,
  Table,
  Pagination,
  ConfigProvider,
  Space,
  Col,
  Row,
  Modal,
  message,
  Upload,
} from "antd";
import zhCN from "antd/lib/locale/zh_CN";
import "./spliebiaos.css";
const props = {
  name: "file",
  action: "https://www.mocky.io/v2/5cc8019d300000980a055e76",
  headers: {
    authorization: "authorization-text",
  },

  onChange(info) {
    if (info.file.status !== "uploading") {
      console.log(info.file, info.fileList);
    }

    if (info.file.status === "done") {
      message.success(`${info.file.name} file uploaded successfully`);
    } else if (info.file.status === "error") {
      message.error(`${info.file.name} file upload failed.`);
    }
  },
};
const Spliebiaos = () => {
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [loading, setLoading] = useState(false);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };
  const start = () => {
    setLoading(true); // ajax request after empty completing

    setTimeout(() => {
      setSelectedRowKeys([]);
      setLoading(false);
    }, 1000);
  };

  const onSelectChange = (newSelectedRowKeys) => {
    console.log("selectedRowKeys changed: ", selectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const props = {
    name: "file",
    action: "https://www.mocky.io/v2/5cc8019d300000980a055e76",
    headers: {
      authorization: "authorization-text",
    },

    onChange(info) {
      if (info.file.status !== "uploading") {
        console.log(info.file, info.fileList);
      }

      if (info.file.status === "done") {
        message.success(`${info.file.name} 上传成功`);
      } else if (info.file.status === "error") {
        message.error(`${info.file.name} 上传失败`);
      }
    },
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  const hasSelected = selectedRowKeys.length > 0;
  const columns = [
    {
      title: "排序",
      dataIndex: "sorting",
      key: "sorting",
      className: "bgColor",
    },
    {
      title: "商品大类",
      dataIndex: "product_categories_id",
      key: "product_categories_id",
      className: "bgColor",
    },
    {
      title: "商品小类",
      dataIndex: "small_class_goods_id",
      key: "small_class_goods_id",
      className: "bgColor",
    },
    {
      title: "商品名称",
      dataIndex: "name_of_commodity",
      key: "name_of_commodity",
      className: "bgColor",
    },
    {
      title: "商品图",
      dataIndex: "commodity_figure",
      key: "commodity_figure",
      className: "bgColor",
    },
    {
      title: "规格",
      dataIndex: "specifications",
      key: "specifications",
      className: "bgColor",
    },
    {
      title: "型号",
      dataIndex: "model",
      key: "model",
      className: "bgColor",
    },
    {
      title: "商品库存",
      dataIndex: "inventory",
      key: "inventory",
      className: "bgColor",
    },
    {
      title: "库存状态",
      dataIndex: "inventory_status",
      key: "inventory_status",
      className: "bgColor",
    },
    {
      title: "成本",
      dataIndex: "cost",
      key: "cost",
      className: "bgColor",
    },
    {
      title: "售价",
      dataIndex: "price",
      key: "price",
      className: "bgColor",
    },
    {
      title: "商品备注",
      dataIndex: "commodity_note",
      key: "commodity_note",
      className: "bgColor",
    },
  ];
  const data = [
    {
      key: 1,
      sorting: 100,
      product_categories_id: "ss",
      small_class_goods_id: "1",
      name_of_commodity: "1",
      commodity_figure: "1",
      specifications: "1",
      model: "1",
      inventory: "1",
      inventory_status: "1",
      cost: "1",
      price: "1",
      commodity_note: "1",
    },
  ];

  // for (let i = 0; i < 46; i++) {
  //   data.push({
  //     key: i,
  //     name: `Edward King ${i}`,
  //     age: 32,
  //     address: `London, Park Lane no. ${i}`,
  //   });
  // }
  const options = [
    {
      value: "zhejiang",
      label: "Zhejiang",
      children: [
        {
          value: "hangzhou",
          label: "Hanzhou",
          children: [
            {
              value: "xihu",
              label: "West Lake",
            },
          ],
        },
      ],
    },
    {
      value: "jiangsu",
      label: "Jiangsu",
      children: [
        {
          value: "nanjing",
          label: "Nanjing",
          children: [
            {
              value: "zhonghuamen",
              label: "Zhong Hua Men",
            },
          ],
        },
      ],
    },
  ];

  const onChange = (value) => {
    console.log(value);
  };
  const onChange1 = (value) => {
    console.log(value);
  };

  return (
    <div className="waiwei">
      <div className="sousuo1">
        按分类筛选:
        <Cascader options={options} onChange={onChange} changeOnSelect />
        商品名称:
        <Input placeholder="" />
        规格:
        <Input placeholder="" />
        型号:
        <Input placeholder="" />
        <Button type="primary" size="small" className="ljss">
          立即搜索
        </Button>
        <Button type="primary" size="small" className="qktj">
          清空条件
        </Button>
      </div>
      <div>
        <Table columns={columns} dataSource={data} pagination={false} />
        <div className="dibu">
          <ConfigProvider locale={zhCN}>
            <Pagination
              className="GetPages"
              total={20}
              showSizeChanger
              showQuickJumper
              showTotal={(total) => `总共 ${total} 页`}
            />
          </ConfigProvider>
        </div>
      </div>
      <Modal
        title="新增商品"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <div id="splbmod">
          <ul>
            <li style={{ display: "flex" }}>
              <span>商品分类</span>
              <span className="splb">
                <Cascader
                  options={options}
                  onChange={onChange1}
                  changeOnSelect
                />
              </span>
            </li>
            <li style={{ display: "flex" }}>
              <span>商品名称</span>
              <span>
                <input type="text" />
              </span>
            </li>
            <li style={{ display: "flex" }}>
              <span>商品图</span>
              <span>
                <Upload {...props}>
                  <Button icon={<UploadOutlined />}>上传文件</Button>
                </Upload>
              </span>
            </li>
            <li style={{ display: "flex" }}>
              <span>规格</span>
              <span>
                <input type="text" />
              </span>
            </li>
            <li style={{ display: "flex" }}>
              <span>型号</span>
              <span>
                <input type="text" />
              </span>
            </li>
            <li style={{ display: "flex" }}>
              <span>商品库存</span>
              <span className="splbinps">
                <input type="text" className="splbinp" />
                <span className="splbinpss">当商品库存低于</span>
              </span>
              <span className="splbinps">
                <input type="text" className="splbinp" />
                <span className="splbinpss">时警告</span>
              </span>
            </li>
            <li style={{ display: "flex" }}>
              <span>成本</span>
              <span>
                <input type="text" />
              </span>
            </li>
            <li style={{ display: "flex" }}>
              <span>售价</span>
              <span>
                <input type="text" />
              </span>
            </li>
            <li className="spbzbli" style={{ display: "flex" }}>
              <span>商品备注</span>
              <span>
                <textarea className="spbzb"></textarea>
              </span>
            </li>
            <li style={{ display: "flex" }}>
              <span>商品排序</span>
              <span>
                <input type="text" />
              </span>
            </li>
          </ul>
        </div>
      </Modal>
    </div>
  );
};
export default Spliebiaos;
